<template>
	<div class="home  d-flex flex-column my-container">
		<div class="title-container" v-if="permersion.search">
			<div class="search-content">
				<el-form :model="searchModel" :inline="true">
					<el-form-item>
						<el-input v-model="searchModel.userName" :disabled="detailsDisabled" placeholder="请输入设备名称"
							prefix-icon="el-icon-search" />
					</el-form-item>
					<el-form-item>
						<el-select v-model="searchModel.status" placeholder="请选择状态">
							<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="searchClick">
							搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!-- <div class="" v-if="permersion.search">

			<el-form :model="searchModel" :inline="true">
				<el-form-item>
					<el-input v-model="searchModel.userName" :disabled="detailsDisabled" placeholder="请输入设备名称"
						prefix-icon="el-icon-search" />
				</el-form-item>
				<el-form-item>
					<el-select v-model="searchModel.status" placeholder="请选择状态">
						<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="searchClick">
						查询</el-button>
				</el-form-item>
			</el-form>
		</div> -->

		<div class="col d-flex flex-column shadow p-3 rounded-lg">
			<div class="" v-if="permersion.search">
				<el-form :model="searchModel" :inline="true">
					<el-form-item>
						<el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="col d-flex over-auto">

				<el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
					<el-table-column type="index" label="序号" width="80" align="center" />
					<el-table-column prop="deviceName" label="设备名称" align="center" />
					<el-table-column prop="deviceType" label="设备类型" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.deviceType == 0 ? '可配置设备' : '固化设备' }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="deviceCode" label="设备编码" align="center" />
					<el-table-column prop="deviceOfRegionSysName" label="设备位置" align="center" />

					<el-table-column prop="deviceDes" label="设备描述" align="center" />

					<el-table-column label="操作" align="center">
						<template #default="{ row }">
							<el-button type="primary" size="mini" @click="toDetail(row)">
								设备配置
							</el-button>

						</template>
					</el-table-column>
				</el-table>
			</div>
			<pagination class="pagination" :total="pageData.total" :page.sync="pageData.pageIndex"
				:limit.sync="pageData.pageSize" @pagination="pagination" />
		</div>
		<!-- 弹框 -->

		<yc-dialog ref="ycDialog" :centerTitle="centerTitle">
			<template #content>
				<div class="dialog-content">
					<el-form ref="loginFormRef" :rules="rules" :model="newAccountModel" label-width="90px">
						<el-form-item label="用户名称" prop="userName">
							<el-input v-model="newAccountModel.userName" :disabled="detailsDisabled" />
						</el-form-item>
						<el-form-item label="角色名称" prop="roleCode">
							<el-select v-model="newAccountModel.roleCode" :disabled="detailsDisabled">
								<el-option v-for="item in userData" :key="item.roleCode" :label="item.roleName" :value="item.roleCode" />
							</el-select>
						</el-form-item>
						<el-form-item label="手机号码" prop="accountPhone">
							<el-input type="number" v-model="newAccountModel.accountPhone" :disabled="detailsDisabled" />
						</el-form-item>
					</el-form>
				</div>
			</template>
			<template #footer>
				<el-button type="primary" @click="dialogSave">确定</el-button>
				<el-button @click="$refs.ycDialog.dialogVisible = false">取消
				</el-button>
			</template>
		</yc-dialog>

		<!-- 封装操作后弹框 -->
		<global-message v-if="isGlobalMessageShow" @receive="receive" :message="message" />
	</div>
</template>

<script>
import {
	queryPageDeviceSedModelParameter,
	queryPageDevice
} from "@/api/settingManagement/devicesSetting"
import {
	accountConfig
} from "@/config/account"
import {
	queryAccountPage,
	updateLAccount,
	ResetPassword,
	deleteAccount,
	deactivate,
	insertUser,
	queryRole
} from "@/api/userControl/account"
import ycDialog from "@/components/pageDialog"
export default {
	data () {
		return {
			pageData: {
				total: 0,
				pageIndex: 1,
				pageSize: 20,
			},
			count: 0,
			pageIndex: 1,
			pageSize: 20,
			userData: [],
			isGlobalMessageShow: false,
			isGlobalMessageBoxShow: false,
			messageTitleDes: "",
			message: "",
			messageBoxSaveShow: false,
			accountConfig,
			tableData: [],

			drawerTitle: "账户详情",
			detailsDisabled: false, //详情 如果为true代表禁用状态
			selectOptions: [{
				label: "正常/停用状态（全部）",
				value: null
			},
			{
				label: "正常",
				value: 1
			},
			{
				label: "禁用",
				value: 0
			}
			],
			searchModel: {
				userName: "",
				status: "" //正常/停用状态（全部）
			},
			treeData: [{
				id: 1,
				label: "一级 1",
				children: [{
					id: 4,
					label: "二级 1-1",
					children: [{
						id: 9,
						label: "三级 1-1-1"
					},
					{
						id: 10,
						label: "三级 1-1-2"
					}
					]
				}]
			},
			{
				id: 2,
				label: "一级 2",
				children: [{
					id: 5,
					label: "二级 2-1"
				},
				{
					id: 6,
					label: "二级 2-2"
				}
				]
			},
			{
				id: 3,
				label: "一级 3",
				children: [{
					id: 7,
					label: "二级 3-1"
				},
				{
					id: 8,
					label: "二级 3-2"
				}
				]
			}
			],
			defaultProps: {
				children: "children",
				label: "label"
			},
			newAccountModel: {
				userName: "",
				roleName: "",
				accountPhone: "",
				id: 0,
				roleCode: ""
			},
			permersion: {
				add: true,
				del: true,
				update: true,
				search: true
			},
			loading: false,
			centerTitle: "",
			rules: {
				userName: [{
					required: true,
					message: "请输入账号",
					trigger: "blur"
				}],
				roleCode: [{
					required: true,
					message: "请选择角色",
					trigger: "change"
				}],
				accountPhone: [{
					required: true,
					trigger: "blur",
					message: "请输入手机号码"
				}]
			}
		}
	},
	components: {
		ycDialog
	},
	created () {
		this.queryPageDeviceSedModelParameter()
	},
	methods: {
		queryPageDeviceSedModelParameter () {
			queryPageDevice({
				pageIndex: this.pageData.pageIndex,
				pageSize: this.pageData.pageSize,
			}).then(res => {
				this.tableData = res.object.data
				this.pageData.total = res.object.count
			}).finally(() => {
				this.loading = false
			})
		},
		//查看设备详情
		toDetail (row) {
			// newSystem/settingManagement/devicesSetting/index
			this.$router.push({
				path: "/devicesSetting/devicesSettingDetail",
				query: {
					deviceName: row.deviceName,
					deviceCode: row.deviceCode,
					deviceDes: row.deviceDes,
					createTime: row.createTime,
					detailType: row.deviceType,
					modelType: row.modelType
				}
			})
		},
		async queryRole () {
			const data = await queryRole()
			this.userData = data.object
		},
		/**
		 * 获取表格方法
		 */
		async getAccountData (pageIndex = 1, pageSize = 20, tableInfo) {
			this.loading = true
			if (tableInfo) {
				const {
					userName,
					status
				} = tableInfo
				const {
					object
				} = await queryAccountPage({
					pageIndex,
					pageSize,
					userName,
					status
				})
				this.tableData = object.data
				this.count = object.count
				this.loading = false
			} else {
				const {
					object
				} = await queryAccountPage({
					pageIndex,
					pageSize
				})
				this.tableData = object.data
				this.count = object.count
				this.loading = false
			}
		},
		pagination (pageItem) {
			// pageItem.page, pageItem.limit
			this.pageData.pageIndex = pageItem.page
			this.pageData.pageSize = pageItem.limit
			this.queryPageDeviceSedModelParameter()
		},

		/**
		 * 修改按钮
		 */
		handlerEdit (row) {
			this.centerTitle = "编辑"
			this.$refs.ycDialog.dialogVisible = true
			this.$refs.loginFormRef?.clearValidate()
			this.detailsDisabled = false
			this.newAccountModel.userName = row.userName
			this.newAccountModel.roleCode = row.roleCode
			this.newAccountModel.accountPhone = row.accountPhone
			this.newAccountModel.id = row.id
		},
		/**
		 * 重置按钮
		 */
		async handlerReset ({
			id
		}) {
			this.$confirm("确定重置密码吗", "重置操作", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				center: true
			}).then(async () => {
				const {
					message,status
				} = await ResetPassword({
					id
				})
				if (status == "200") {
					this.getAccountData()
					this.isGlobalMessageShow = true
					this.message = "success"
				}
			})
		},
		/**
		 * 启用或者禁用按钮
		 */
		async handlerStatus ({
			id,
			status
		}) {
			const confirmMessageMap = status == 1 ? "确定禁用吗" : "确定启用吗"
			this.$confirm(confirmMessageMap, "禁用/启用操作", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				center: true
			}).then(async () => {
				const {
					message,status
				} = await deactivate({
					id
				})
				if (status == "200") {
					this.getAccountData()
					this.isGlobalMessageShow = true
					this.message = "success"
				}
			})
		},
		/**
		 * 删除按钮
		 */
		async handlerDelete ({
			id
		}) {
			this.$confirm("确定删除此用户吗", "删除操作", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "error",
				center: true
			}).then(async () => {
				const {
					message,status
				} = await deleteAccount({
					id
				})
				if (status == "200") {
					this.getAccountData()
					this.isGlobalMessageShow = true
					this.message = "success"
				}
			})
		},

		// 搜索按钮
		async searchClick () {
			this.getAccountData(1, 20, this.searchModel)
		},
		/**
		 * 新建账户
		 * */
		async handlerAccount () {
			this.centerTitle = "添加"
			this.detailsDisabled = false
			this.$refs.ycDialog.dialogVisible = true
			Object.keys(this.newAccountModel).forEach((item) => {
				this.newAccountModel[item] = ""
			})
			this.$refs.loginFormRef?.clearValidate()
		},
		dialogSave () {
			this.$refs.loginFormRef.validate(async (v) => {
				if (v) {
					if (this.detailsDisabled) {
						// 详情的确定
						this.$refs.ycDialog.dialogVisible = false
					} else if (this.newAccountModel.id) {
						const {
							userName,
							accountPhone,
							id,
							roleCode
						} =
							this.newAccountModel
						const {
							message,
							status
						} = await updateLAccount({
							userName,
							roleCode,
							accountPhone,
							id
						})
						if (status == 200) {
							this.getAccountData()
							this.$refs.ycDialog.dialogVisible = false
							this.$message.success(message)
						}
					} else {
						const {
							message,
							status
						} = await insertUser(this.newAccountModel)
						if (status == 200) {
							this.getAccountData(1, 20)
							this.$refs.ycDialog.dialogVisible = false
							this.$message.success(message)
						}
					}
				}
			})
		},
		/**
		 * 刷新
		 */
		refresh () {
			this.searchModel = {}
			this.queryPageDeviceSedModelParameter()
		},
		/**
		 * globalMessage的知道按钮的方法
		 * */
		receive () {
			this.isGlobalMessageShow = false
		},
		async messageBoxSave (show) {
			this.messageBoxSaveShow = show
		}
	}
}
</script>

<style lang="scss" scoped>
.status {
	display: inline-block;
	padding: 0 10px;
}

.pagination {
	display: flex;
	justify-content: flex-end;
}

.content {
	height: 600px;

	.drawer-title {
		font-weight: 400;
		font-size: 24px;
		color: #000000;
		text-align: center;
		padding: 36px 0;
	}

	.form {
		padding: 0 10px;
	}
}

.footer {
	height: 360px;
	display: flex;
	align-items: flex-end;
	// justify-content: st-end;
	padding: 5px 20px;
}

.title-container {
	display: flex;
	justify-content: flex-end;
	height: 60px;

	.search-content {
		display: flex;
	}

	.addAccount {
		margin: 10px 20px;
	}
}
</style>
